<template>
	<view class="home-page">
		<wd-swiper :list="banner" autoplay :indicator="{ type: 'dots-bar' }" ></wd-swiper>
		<view class="home-main">
			<view class="user-info">
				<view class="td-name"> {{ info.title }} </view>
				<view class="tel-box">
					<view class="tel" @tap="call(info.tel1)">
						<wd-icon name="call" size="14px"></wd-icon>
						<text> {{ info.tel1 }} </text>
					</view>
					<view class="tel" @tap="call(info.tel2)">
						<wd-icon name="call" size="14px"></wd-icon>
						<text> {{ info.tel2 }} </text>
					</view>
				</view>
				<view class="intro">
					<!-- <view class="i-title"> 用户简介 </view> -->
					<view class="i-info"> {{ info.into }} </view>
				</view>
			</view>
			<UCharts v-if="userInfo.role_id == '13'"/>
			<!-- 公告 -->
			<view class="notice-box" v-if="notices.length">
				<view class="notice-title"> 公告 </view>
				<view class="notice-list">
					<view class="notice" v-for="item in notices" :key="item.id">
						<div class="notice-info">
							<div class="title"> {{ item.title }} </div>
							<div class="content"> {{ item.content }} </div>
						</div>
						<view class="notice-footer">
							<view class="time"> {{ item.fabu_time }} </view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { homeApi } from '@/api'
	import { useUserStore }from '@/store'
	import UCharts from '@/components/UCharts.vue'
	const { userInfo } = useUserStore()
	const banner = ref([])
	const notices = ref([])
	const info = ref({
		title: '',
		tel1: '',
		tel2: '',
		into: ''
	})
	const call = () =>{
		uni.makePhoneCall({
			phoneNumber: 13345678999
		})
	}
	const getHomeList = () =>{
		const { userInfo } = useUserStore()
		homeApi({ uid: userInfo?.uid }).then(res => {
			info.value = res?.info
			banner.value = res?.banner
			notices.value = res?.gonggaoarray
		}).catch(err => {
			
		})
	}
	onLoad(() => {
		getHomeList()
	})
</script>

<style lang="scss" scoped>
	.home-page {
		padding: 20rpx 24rpx;
		font-size: 14px;
		padding-top: calc(var(--status-bar-height) + 20rpx);
		.home-main {
			// padding: 20rpx 24rpx;
			margin-top: 30rpx;
			.user-info {
				padding: 40rpx;
				border-radius: 20rpx;
				margin-bottom: 20rpx;
				background-color: #fff;
				display: flex;
				flex-direction: column;
				gap: 20rpx;
				.td-name {
					font-weight: bold;
					font-size: 36rpx;
				}
				.tel-box {
					display: flex;
					justify-content: space-between;
				}
				.intro {
					.i-info {
						color: #999;
						font-size: 24rpx;
						line-height: 36rpx;
						margin-top: 20rpx;
					}
				}
			}
			.notice-box {
				.notice-title {
					color: #333;
					font-size: 32rpx;
					margin-bottom: 20rpx;
				}
				.notice-list {
					gap: 20rpx;
					display: flex;
					flex-direction: column;
					.notice {
						padding: 20rpx;
						border-radius: 20rpx;
						box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
						.content {
							color: #999;
							padding: 10rpx;
							font-size: 26rpx;
						}
						.notice-footer {
							width: 100%;
							color: #999;
							font-size: 24rpx;
							text-align: right;
							margin-top: 10rpx;
							padding-top: 20rpx;
							border-top: 1px solid #eee;
						}
					}
				}
			}
		}
	}
</style>
